<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick" type='card'>
      <el-tab-pane :label="item.tab+'('+item.total+')'" :name="item.name" v-for="item in tabs" :key='item.id'>

      </el-tab-pane>
    </el-tabs>
    <div class="filter-container filter-container-left">
      <el-form class="form_search flex_box_between" :inline="true" label-width='90px'>
        <el-form-item label="企业名称：" class="flex_box">
          <el-input v-model="queryParam.name" placeholder="请输入姓名" clearable class="filter-item"></el-input>
        </el-form-item>
        <el-form-item label="账号：" class="flex_box">
          <el-input v-model="queryParam.mobile" placeholder="请输入姓名" clearable class="filter-item"></el-input>
        </el-form-item>
        <el-form-item label="职位类型：" class="flex_box">
          <el-cascader
            ref='postCascader'
            v-model="queryParam.attr_value_id"
            :options="postTypeList"
            :props='optionProps'
            :show-all-levels="false"
            @change='filterPostChange'
            placeholder="请选择职位类型"
            class="filter-item form-search-input" 
            ></el-cascader>
        </el-form-item>
        <el-form-item label="创建日期：" class="flex_box">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            class="filter-item"
            @change='timeChange'
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <el-form class="flex_box"  :inline="true" label-width='90px'>
        <el-form-item label="用户来源：">
          <el-select v-model="queryParam.source" placeholder="请选择用户来源" class="filter-item">
            <el-option
              v-for="item in sourceList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="filter-item search" type='primary' icon="iconfont icon-sousuo" @click="handleSearch">查询</el-button>
          <el-button class="filter-item search" type="info" plain icon="iconfont icon-zhongzhi" @click="handleRefresh">重置</el-button>
          <el-button class="filter-item search" icon="iconfont icon-daochu" @click="handleExport">导出</el-button>
          <el-button class="filter-item search" icon="iconfont icon-piliangdaoru" @click="handleImport">批量导入</el-button>
          <el-button class="filter-item" type="warning" icon="el-icon-plus" @click="addPost">添加职位</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row class="count_box" :gutter="35">
      <el-col :span="12">
        <div class="count_item flex_box_center">
          <p class="icon icon1"></p>
          <div class="count_info">
            <p>{{filterPostName || post_count+'种'}}</p>
            <span>职位类型</span>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="count_item flex_box_center">
          <p class="icon icon2"></p>
          <div class="count_info">
            <p>{{total_count}}</p>
            <span>职位总数</span>
          </div>
        </div>
      </el-col>
    </el-row>
    
    <el-table
      :data="data"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <!-- <el-table-column prop="id" label="序号" width='60' align='center'/> -->
      <el-table-column label="职位名称" align='center'>
        <template slot-scope="item">
          <p>{{item.row.diy_post_type || getAttrValue(item.row.value_list,'POST_TYPE')}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="company_info.name" label="发布企业" align='center'/>
      <el-table-column prop="user_info.mobile" label="账号" width='100' align='center'/>
      <el-table-column prop="number_recruiters" label="招聘人数" width='100' align='center'/>
      <el-table-column prop="deliver_count" label="收到简历数" width='100' align='center'/>
      <el-table-column prop="browse_count" label="浏览量" width='100' align='center'/>
      <el-table-column label="来源" width='90' align='center'>
        <template slot-scope="item">
          <p>{{getSourceText(item.row.source)}}</p>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop='create_time' width='130' align='center'/>
      <el-table-column label="推广" width='120' align='center'>
        <template slot-scope="item">
          <el-switch
            v-model="item.row.is_hot"
            :active-value="1"
            :inactive-value="0"
            active-text='热门'
            @change="postUpdate(item.row,'is_hot')"/>
        </template>
      </el-table-column>
      <el-table-column label="招聘状态" width='120' align='center'>
        <template slot-scope="item">
          <el-switch
            v-model="item.row.is_show"
            :active-value="1"
            :inactive-value="0"
            :active-text="item.row.is_show==1?'显示':'隐藏'"
            @change="postUpdate(item.row,'is_show')"
          />
        </template>
      </el-table-column>
      <el-table-column prop="status" label="审核状态" width='80' align='center'>
        <template slot-scope="item">
          <el-button type="text">{{getStatusText(item.row.status)}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width='280' align='center'>
        <template slot-scope="item">
          <el-link type="primary" class="table_btn" v-if="item.row.status==0" @click="handleDetails(item.row,'2')" :underline="false"><i class="iconfont icon-shenhe1"></i>审核</el-link>
          <el-link type="primary" class="table_btn" @click="handleDetails(item.row,'1')" :underline="false"><i class="iconfont icon-chakan"></i>查看</el-link>
          <el-link type="primary" class="table_btn" @click="handleUpdate(item.row)" :underline="false"><i class="iconfont icon-bianji"></i>编辑</el-link>
          <el-link type="danger" class="table_btn" @click="handleDelete(item.row.id)" :underline="false"><i class="iconfont icon-lajitong1"></i>删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      class="pagination-container"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginate.current"
      :hide-on-single-page='isHideSingle'
      :page-sizes="paginate.sizes"
      :page-size="paginate.limit"
      :layout="paginate.layout"
      :total="paginate.total"/>
    <postExamine ref='postExamine' @postUpdate='postUpdate'></postExamine>
    <addPost ref='addPost' @success='getList'></addPost>
    <importExcel ref='importExcel'></importExcel>
  </div>
</template>

<script>
import { export2Excel } from '@/utils/excel'
import formOperate from '@/layout/mixin/formOperate'
import addPost from '../components/addPost.vue'
import postExamine from '@/views/talents/components/postExamine'
import importExcel from '@/components/importExcel'
export default {
  name: 'Index',
  mixins: [formOperate],
  data() {
    return {
      url:'/profession/admin/post',
      activeName: 'first',// tabs默认第几个展开
      tabs:[
        {id:-1,tab:'所有职位',name:'first',total:0},
        {id:0,tab:'待审核',name:'second',total:0},
        {id:1,tab:'已通过',name:'third',total:0},
        {id:2,tab:'已驳回',name:'fourth',total:0}
      ],
      queryParam: {
        name: '',
        attr_value_id: '',
        mobile:'',
        start_time:'',
        end_time:'',
        source:'',
        page:1,
        page_size:10,
        status:-1
      },
      defaultQueryParam:['page','page_size','status'],
      post_count:'', // 职位类型
      total_count:'',//职位总数
      filterPostName:'',
      optionProps: {
        value: 'value_id',
        label: 'value_name',
        children: 'child'
      },
      time:''
    }
  },
  mounted() {
    this.GetAttrData('POST_TYPE')
  },
  methods: {
    // 搜索职位类型改变
    filterPostChange(e) {
      this.queryParam.attr_value_id = e[1]
      let nodes = this.$refs.postCascader.getCheckedNodes()
      this.filterPostName = nodes[0].label
    },
    // 添加职位
    addPost() {
      this.$refs.addPost.show(this.postTypeList,1)
    },
    // 修改职位
    handleUpdate(item) {
      this.$refs.addPost.show(this.postTypeList,1,'','',item)
    },
    // 查看详情/审核
    handleDetails(item,type) {
      this.$refs.postExamine.show(item,type)
    },
    // 修改简历置顶，热门，是否显示，审核
    postUpdate(item,key) {
      let param = {}
      param[key] = item[key]
      if (key == 'status') {
        param['remake'] = item.remake
      }
      this.$http.put('/profession/admin/post/'+item.id,param).then(response => {
        if (response.code === 10000) {
          this.$message.success(response.message)
          if (key == 'status') {
            this.$refs.postExamine.hide()
          }
          this.getList()
        } else {
          this.$message.error(response.message)
        }
      })
    },
    // 导出
    handleExport() {
      let columns = [
        {title:'职位名称',key:'post'},
        {title:'发布企业',key:'name'},
        {title:'账号',key:'mobile'},
        {title:'招聘人数',key:'number_recruiters'},
        {title:'收到简历数',key:'deliver_count'},
        {title:'浏览量',key:'browse_count'},
        {title:'来源',key:'source'},
        {title:'创建时间',key:'update_time'},
        {title:'招聘状态',key:'post_status'},
        {title:'审核状态',key:'status'}
      ]
      let list = []
      this.data.forEach(res=>{
        list.push({
          post:res.diy_post_type || this.getAttrValue(res.value_list,'POST_TYPE'),
          name:res.company_info.name,
          mobile:res.user_info.mobile,
          number_recruiters:res.number_recruiters,
          deliver_count:res.deliver_count,
          browse_count:res.browse_count,
          source:this.getSourceText(res.source),
          update_time:res.create_time,
          post_status:res.is_show==1?'求职中':'已下架',
          status:this.getStatusText(res.status)
        })
      })
      export2Excel(columns,list,'职位数据')
    },
    // 批量导入
    handleImport() {
      this.$refs.importExcel.show(4)
    }
  },
  components:{
    addPost,
    postExamine,
    importExcel
  }
}
</script>

<style lang="scss" scoped>
  .title{
    font-size: 14px;
    margin:10px 0;
    font-weight: bold;
    color:#5c90d2;
  }
  .company_name{
    font-size: 14px;
    font-weight: bold;
    margin:10px 0;
  }
  .info{
    line-height: 30px;
  }
  .margin_btm{
    margin-bottom: 10px;
  }
  .img_box{
    text-align: center;
  }
  .job_list{
    border:1px solid #eee;
    padding: 10px;
    border-radius: 4px;
  }
  .status_text{
    color:#ea0000;
    margin-left: 6px;
  }
  
  .count_box{
    margin-bottom: 20px;
    font-size: 14px;
    color:#222;
    .count_item{
      height: 158px;
      padding:35px 0;
      box-shadow: 0px 0px 6px rgba(22, 78, 138, 0.19);
      box-sizing: border-box;
      cursor: pointer;
      &:hover{
        background: linear-gradient(318deg, #2193FE 0%, #65B5FF 100%);
        p{
          color:#fff;
        }
        span{
          color:#DCDCDC;
        }
        .icon{
          background-color:#fff;
        }
      }
      .icon{
        width: 88px;
        height: 88px;
        background-color: #E8F3FF;
        background-size:inherit;
        background-repeat:no-repeat;
        background-position: center center;
        border-radius: 50%;
        margin-right: 60px;
        &.icon1{
          background-image: url('~@/assets/images/icon15.png');
        }
        &.icon2{
          background-image: url('~@/assets/images/icon16.png');
        }
      }
      p{
        font-size: 46px;
        color:#424554;
        line-height: 46px;
        margin-bottom:4px;
      }
      span{
        font-size: 18px;
        color:#AAAAAA;
        line-height: 31px;
      }
    }
  }
</style>